<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>16_2D-位移-基本使用</title>
        <style>
            .outer {
                margin-left: 300px;
                width: 200px;
                height: 200px;
                border: 1px solid black;
            }

            .inner {
                width: 200px;
                height: 200px;
                background-color: green;

                /* （1）水平向右移动100像素 */
                /* transform: translateX(100px); */

                /* （2）垂直方向向下移动100像素 */
                /* translateX和 translateY不可以同时生效*/
                /* transform: translateY(100px); */

                /* （3）第一个参数是x轴  第二个参数是y轴 */
                /* transform: translate(100px,100px); */

                /* （4）如果只写了一个值 那么代表的是水平方法的距离 */
                /* transform: translate(100px); */

                /* （5）百分比 
                    根据自身的百分比
                */
                transform: translateX(50%);

                transform: translateY(50%);

                transform: translate(50%,50%);
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">

            </div>
        </div>
    </body>
</html>